<template>
  <div class="caseClaim">
    <div class="header-1">
      <div class="header-1-1">
        <div class="tou"></div>
        <span>查询条件</span>
      </div>
    </div>
    <!-- 筛选 -->
    <el-form
      style="margin-left: 20px; font-size: 12px"
      size="mini"
      label-width="80px"
      :data="Thequery"
      :model="Thequery"
      class="invoice"
    >
      <el-form-item size="mini" label="工单号">
        <el-input style="width: 100px" v-model="Thequery.caseId"></el-input>
      </el-form-item>
      <el-form-item size="mini" label="状态">
        <el-select
          clearable
          v-model="Thequery.caseStatus"
          size="mini"
          placeholder="请选择"
          style="width: 100px"
        >
          <el-option
            v-for="item in condition"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="mini" label="创建时间">
        <el-date-picker
          style="width: 130px"
          v-model="CX.date1"
          type="date"
          placeholder="选择日期时间"
          :value-format="format"
        >
        </el-date-picker>
        <span class="invoice-9">至 </span>
        <el-date-picker
          style="width: 130px"
          v-model="CX.date2"
          type="date"
          placeholder="选择日期时间"
          :value-format="format"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item size="mini" label="订单号">
        <el-input
          onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
          style="width: 120px"
          size="mini"
          v-model="Thequery.orderId"
        ></el-input>
      </el-form-item>
      <el-form-item size="mini" label="工单类型">
        <el-select
          clearable
          v-model="Thequery.orderType"
          size="mini"
          placeholder="请选择"
          style="width: 120px"
        >
          <el-option
            v-for="item in mold"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <div>
        <el-button
          style="color: #fff; width: 60px"
          size="mini"
          type="primary"
          @click="seachBtn"
          >查询
        </el-button>
        <el-button
          type="primary"
          style="color: #fff; width: 60px"
          size="mini"
          @click="centerDialogadd"
          >新增
        </el-button>
      </div>
    </el-form>
    <el-form
      style="margin-left: 50px; font-size: 14px"
      size="mini"
      :inline="true"
      :data="Thequery"
      :model="Thequery"
      class="invoice"
    >
      <!-- <div class="invoice-1">
        <span class="invoice-9">手机号</span>
        <el-input onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" style="width: 120px"
          v-model="Thequery.phone" size="mini"></el-input>
      </div> -->
      <!-- <div class="invoice-1">
        <span class="invoice-9">会员id</span>
        <el-input onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" style="width: 120px"
          v-model="Thequery.customerId" size="mini"></el-input>
      </div> -->
    </el-form>
    <!-- 表格 -->
    <div class="header-1">
      <div class="tuo">
        <div class="tuo-1">
          <div class="tuo-2"></div>
          <span>工单列表</span>
        </div>
      </div>
      <!-- 订单列表 -->
      <div class="table">
        <el-table
          border
          size="mini"
          ref="multipleTable"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          :row-style="{ height: '40px' }"
          tooltip-effect="dark"
          :data="Therepairorder"
        >
          <el-table-column prop="caseId" label="工单号" width="100">
          </el-table-column>
          <el-table-column prop="caseType" label="工单类型" width="144">
            <template slot-scope="scope">
              <template v-if="scope.row.caseType=='claim'">理赔</template>
              <!-- <template
                v-for="(item, index) in workOrderType"
                v-if="scope.row.caseType == item.value"
              >
                {{ item.label }}
              </template> -->
            </template>
          </el-table-column>
          <el-table-column prop="cardTypeId" label="工单分类" width="144">
            <template slot-scope="scope" v-if="scope.row.cardTypeId == item.caseTypeId">
              <template
                v-for="(item) in orderLedger" 
                
              >
                {{ item.caseTypeName }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="caseSubject" label="工单标题">
          </el-table-column>
          <!-- <el-table-column prop="caseContent" label="工单内容">
          </el-table-column>
          <el-table-column prop="createEmployeeId" label="创建人" width="84">
          </el-table-column>
          <el-table-column prop="deptName" label="创建部门" width="84">
          </el-table-column> -->
          <el-table-column prop="caseCreateTime" label="创建时间" width="120">
          </el-table-column>
          <el-table-column prop="orderType" label="订单类型" width="120">
            <template slot-scope="scope" v-if="scope.row.orderType == item.value">
              <template v-for="(item) in mold" 
              > {{ item.label }}</template>
            </template>
          </el-table-column>
          <el-table-column prop="orderId" label="订单号" width="160">
          </el-table-column>

          <el-table-column
            prop="receivingDepartment"
            label="接收部门"
            width="100"
          >
          </el-table-column>
          <!-- <el-table-column prop="receivePost" label="接收岗位" width="110">
          </el-table-column> -->
          <el-table-column prop="receiver" label="接收人员" width="80">
          </el-table-column>
          <el-table-column prop="pri" label="紧急" width="70">
            <template slot-scope="scope">
              <template>
                {{ scope.row.pri == "0" ? "普通" : "紧急" }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="caseStatus" label="状态" width="80">
            <template slot-scope="scope">
              <template>
                {{
                  scope.row.caseStatus == "1"
                    ? "处理完"
                    : scope.row.caseStatus == "2"
                    ? "废弃"
                    : "待处理"
                }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                style="background-color: #6090ec; color: #fff"
                @click="getclaimById(scope.row, '0')"
                >详情
              </el-button>
              <el-button
                size="mini"
                style="background-color: #6090ec; color: #fff"
                @click="getclaimById(scope.row, '1')"
                >修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 新建工单 -->
    <el-dialog
      title="创建理赔工单"
      :visible.sync="centerDialogVisible"
      :close-on-click-modal="false"
      width="80%"
      center
      :close="closediali()"
    >
      <div class="body">
        <!-- 第一行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">会员手机</div>
          <div class="nocolorCss">
            <el-input
              maxlength="11"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              size="mini"
              v-model.trim="customerPhone"
              placeholder="请输入手机号"
            ></el-input>
          </div>
          <div class="colorCss">卡类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              v-model="cardType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cardTypeList"
                :key="item.value"
                :label="item.cardSectionName"
                :value="item.cardId"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">会员姓名</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              v-model.trim="customerName"
              placeholder="请输入姓名"
            ></el-input>
          </div>
          <div class="colorCss">会员卡号</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model.trim="cardNum"
              placeholder="请输入卡号"
            ></el-input>
          </div>
          <div>
            <el-button size="mini" type="primary" @click="getcustomerId"
              >查询</el-button
            >
          </div>
        </div>
        <!-- 第二行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">工单类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              v-model="caseType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in gongdanTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">工单分类</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              v-model="caseTypeId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orderLedger"
                :key="item.value"
                :label="item.caseTypeName"
                :value="item.caseTypeId"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">工单小类</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              v-model="caseSubType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in workOrderTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">工单标题</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              v-model.trim="caseSubject"
              placeholder="请输入工单标题"
            ></el-input>
          </div>
          <div class="colorCss">已理赔次数</div>
          <div class="nocolorCss">
            <el-input
              type="number"
              min="0"
              size="mini"
              v-model.trim="workOrderContentVo.claimCount"
              placeholder="请输入理赔次数"
            ></el-input>
          </div>
        </div>
        <!-- 第三行 -->
        <div class="rowcss" style="display: flex">
          <div class="rowheight">工单内容</div>

          <el-form
            style="width: 950px; margin: 20px 20px 0 20px"
            :inline="true"
            class="demo-form-inline"
            :model="workOrderContentVo"
            :rules="rules"
          >
            <el-form-item label="延误时长">
              <el-input
                size="mini"
                placeholder="延误时长"
                v-model.trim="workOrderContentVo.delayTime"
              ></el-input>

              <!-- <el-date-picker
                v-model.trim="workOrderContentVo.delayTime"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker> -->
            </el-form-item>
            <el-form-item label="延误日期" prop="delayDate">
              <el-date-picker
                :value-format="format1"
                v-model.trim="workOrderContentVo.delayDate"
                size="mini"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="原定航班日期" prop="originalSetOffTime">
              <el-date-picker
                type="date"
                :value-format="format1"
                v-model.trim="workOrderContentVo.originalSetOffTime"
                size="mini"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="航班号" prop="flightNumber">
              <el-input
                onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
                size="mini"
                v-model.trim="workOrderContentVo.flightNumber"
                placeholder="输入航班号"
              ></el-input>
            </el-form-item>
            <el-form-item label="出发机场">
              <el-select
                filterable
                v-model="workOrderContentVo.departureAirport"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in auxiliary"
                  :key="index"
                  :label="item.airportName"
                  :value="item.airportName"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="到达机场">
              <el-select
                filterable
                v-model="workOrderContentVo.arriveAirport"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in auxiliary"
                  :key="index"
                  :label="item.airportName"
                  :value="item.airportName"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="行程">
              <el-col :span="11">
                <el-input
                  size="mini"
                  v-model.trim="workOrderContentVo.journeySetOff"
                  placeholder="出发"
                ></el-input>
              </el-col>
              <el-col class="line" :span="2">————</el-col>
              <el-col :span="11">
                <el-input
                  size="mini"
                  v-model.trim="workOrderContentVo.journeyArrive"
                  placeholder="到达"
                ></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="航班状态">
              <el-select
                size="mini"
                v-model.trim="flightStatus"
                style="200px"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in flightStatusList"
                  :key="index"
                  :label="item.value"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="原定起飞时间">
              <el-date-picker
                v-model.trim="workOrderContentVo.originalDepartureTime"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="实际起飞时间">
              <el-date-picker
                v-model.trim="workOrderContentVo.actualDepartureTime"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="原定降落时间">
              <el-date-picker
                v-model.trim="workOrderContentVo.originalLandingTime"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="实际降落时间">
              <el-date-picker
                v-model.trim="workOrderContentVo.actualLandingTime"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="延误情况补充">
              <el-input
                type="textarea"
                autosize
                v-model.trim="workOrderContentVo.delayContent"
                size="mini"
                placeholder="延误情况补充"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份证正面图片上传">
              <el-upload
                action="/file/fileMapping/uploadAvatarWorkOrder"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="successpickcherone"
                :headers="headers"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <!--  -->
            </el-form-item>
            <!-- --------------------------------------------------------------------------------- -->
            <el-form-item label="身份证反面图片上传">
              <el-upload
                action="/file/fileMapping/uploadAvatarWorkOrder"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="successpickchertwo"
                :headers="headers"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <!--  -->
            </el-form-item>
            <el-form-item label="登机牌图片上传">
              <el-upload
                action="/file/fileMapping/uploadAvatarWorkOrder"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="successpickcherthree"
                :headers="headers"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <!--  -->
            </el-form-item>
            <el-form-item label="航班延误图片上传">
              <el-upload
                action="/file/fileMapping/uploadAvatarWorkOrder"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="successpickcherfour"
                :headers="headers"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <!--  -->
            </el-form-item>
          </el-form>
        </div>
        <!-- 第四行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">接收部门</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="receivingDepartment"
              placeholder="请选择"
              clearable
              @change="choosePost"
            >
              <el-option
                v-for="(item, index) in departmentList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!-- <div class="colorCss">接受岗位</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              v-model="receivePost"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in PositionDownList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div> -->
          <div class="colorCss">接收人员</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              v-model="receiver"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in choosepostslists"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!-- <div class="colorCss">创建人</div>
          <div class="nocolorCss" style="width: 320px">
            <el-select
              size="mini"
              clearable
              v-model="founder"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in postslists"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">创建部门</div>
          <div class="nocolorCss" style="width: 320px">
            <el-select
              size="mini"
              style="200px"
              v-model.trim="createCepartment"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in departmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div> -->
        </div>
        <!-- 第五行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">紧急程度</div>
          <div class="nocolorCss">
            <el-select size="mini" clearable v-model="pri" placeholder="请选择">
              <el-option
                v-for="(item, index) in prilist"
                :key="index"
                :label="item.value"
                :value="item.type"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">订单类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              v-model="orderType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in businessList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">订单号</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              v-model="orderId"
              placeholder="订单号(必填)"
            ></el-input>
          </div>
          <!-- <div class="nocolorCss">
            <el-button size="mini">查询订单</el-button>
          </div> -->
        </div>
        <!-- 第六行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">指定完成时间</div>
          <div class="nocolorCss">
            <el-date-picker
              :value-format="format1"
              size="mini"
              v-model.trim="specifiedTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
          <div class="colorCss">期望完成时间</div>
          <div class="nocolorCss">
            <el-date-picker
              :value-format="format1"
              size="mini"
              v-model="finish"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
          <div class="colorCss">期望回复时间</div>
          <div class="nocolorCss">
            <el-input
              style="width: 100px"
              v-model="reply"
              size="mini"
              placeholder="期望回复时间"
            ></el-input
            >分钟
          </div>
        </div>
        <!-- 第七行 -->
        <div style="display: flex; width: 100%" class="rowcss">
          <div style="width: 49%"></div>
          <el-button type="primary" size="mini" @click="getbackGuaranteeCase"
            >保存</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="centerDialogVisible = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisibledet"
      :close-on-click-modal="false"
      width="80%"
      center
    >
      <div class="body">
        <!-- 第一行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">会员手机</div>
          <div class="nocolorCss">
            <el-input
              maxlength="11"
              size="mini"
              :disabled="title == '理赔工单编辑'"
              v-model="claimDetail.phone"
              placeholder="请输入手机号"
            ></el-input>
          </div>
          <div class="colorCss">会员卡号</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              :disabled="title == '理赔工单编辑'"
              v-model="claimDetail.guaranteeCase.memberCardNumber"
              placeholder="请输入卡号"
            ></el-input>
          </div>
          <div class="colorCss">会员姓名</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              v-model="claimDetail.customername"
              :disabled="title == '理赔工单编辑'"
              placeholder="请输入姓名"
            ></el-input>
          </div>
          <div class="colorCss">卡类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="claimDetail.guaranteeCase.cardNumberId"
              :disabled="title == '理赔工单编辑'"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cardTypeList"
                :key="item.cardId"
                :label="item.cardSectionName"
                :value="item.cardId"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-button size="mini" type="primary" @click="getcustomerId"
              >查询</el-button
            >
          </div>
        </div>
        <!-- 第二行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">工单类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              :disabled="title == '理赔工单编辑'"
              v-model="claimDetail.guaranteeCase.orderType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in businessList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">工单分类</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              v-model="claimDetail.guaranteeCase.caseTypeId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orderLedger"
                :key="item.value"
                :label="item.caseTypeName"
                :value="item.caseTypeId"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">工单小类</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              :disabled="title == '理赔工单编辑'"
              v-model="claimDetail.guaranteeCase.workOrderSubclass"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in workOrderTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">工单标题</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              :disabled="title == '理赔工单编辑'"
              v-model.trim="claimDetail.guaranteeCase.ticketTitle"
              placeholder="请输入工单标题"
            ></el-input>
          </div>
          <div class="colorCss">已理赔次数</div>
          <div class="nocolorCss">
            <el-input
              type="number"
              min="0"
              size="mini"
              :disabled="title == '理赔工单编辑'"
              v-model.trim="claimDetail.claimCount"
              placeholder="请输入理赔次数"
            ></el-input>
          </div>
        </div>
        <!-- 第三行 -->
        <div class="rowcss" style="display: flex">
          <div class="rowheight">工单内容</div>
          <el-form
            style="width: 950px; margin: 20px 20px 0 20px"
            :inline="true"
            class="demo-form-inline"
            :model="workOrderContentVo"
            :rules="rules"
          >
            <el-form-item label="延误时长">
              <!-- <el-input
                size="mini"
                placeholder="延误时长"
                v-model.trim="workOrderContentVo.delayTime"
              ></el-input> -->
              <el-date-picker
                v-model.trim="claimDetail.reallandingtime"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="延误时长"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="延误日期" prop="delayDate">
              <el-date-picker
                :value-format="format1"
                v-model.trim="claimDetail.latedate"
                size="mini"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="原定航班日期" prop="originalSetOffTime">
              <el-date-picker
                type="date"
                :value-format="format1"
                v-model.trim="claimDetail.departureTime"
                size="mini"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="航班号" prop="flightNumber">
              <el-input
                onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
                size="mini"
                v-model.trim="claimDetail.flightno"
                placeholder="输入航班号"
              ></el-input>
            </el-form-item>
            <el-form-item label="出发机场">
              <el-input
                size="mini"
                v-model.trim="claimDetail.departurecode"
                placeholder="出发机场"
              ></el-input>
            </el-form-item>
            <el-form-item label="到达机场">
              <el-input
                size="mini"
                v-model.trim="claimDetail.arrivalcode"
                placeholder="到达机场"
              ></el-input>
            </el-form-item>
            <el-form-item label="行程">
              <el-col :span="11">
                <el-input
                  size="mini"
                  v-model.trim="claimDetail.departure"
                  placeholder="出发"
                ></el-input>
              </el-col>
              <el-col class="line" :span="2">————</el-col>
              <el-col :span="11">
                <el-input
                  size="mini"
                  v-model.trim="claimDetail.arrival"
                  placeholder="到达"
                ></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="航班状态">
              <el-select
                size="mini"
                v-model.trim="claimDetail.flightstatus"
                style="200px"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in flightStatusList"
                  :key="index"
                  :label="item.value"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="原定起飞时间">
              <el-date-picker
                v-model.trim="claimDetail.departureTime"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="实际起飞时间">
              <el-date-picker
                v-model.trim="claimDetail.realFlyawayDate"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="原定降落时间">
              <el-date-picker
                v-model.trim="claimDetail.scheduledlandingtime"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="实际降落时间">
              <el-date-picker
                v-model.trim="claimDetail.reallandingtime"
                :value-format="format1"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="延误情况补充">
              <el-input
                type="textarea"
                autosize
                v-model.trim="claimDetail.delayContent"
                size="mini"
                placeholder="延误情况补充"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="身份证正面图片上传">
              <el-upload
                action="/file/fileMapping/uploadAvatarWorkOrder"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="successpickcherfiv"
                :headers="headers"
                :on-remove="onRemove"
                :file-list="certBefore"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <!--  -->
            </el-form-item>
            <!-- --------------------------------------------------------------------------------- -->
            <el-form-item label="身份证反面图片上传">
              <el-upload
                action="/file/fileMapping/uploadAvatarWorkOrder"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="successpickchersix"
                :on-remove="onRemovea"
                :headers="headers"
                :file-list="certAfter"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <!--  -->
            </el-form-item>
            <el-form-item label="登机牌图片上传">
              <el-upload
                action="/file/fileMapping/uploadAvatarWorkOrder"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="successpickchersev"
                :on-remove="onRemoves"
                :headers="headers"
                :file-list="boardingPass"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <!--  -->
            </el-form-item>
            <el-form-item label="航班延误图片上传">
              <el-upload
                action="/file/fileMapping/uploadAvatarWorkOrder"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="successpickchereig"
                :on-remove="onRemoved"
                :headers="headers"
                :file-list="flightProve"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <!--  -->
            </el-form-item>
          </el-form>
        </div>
        <!-- 第四行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">接收部门</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="claimDetail.guaranteeCase.receiveDepartmentId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in departmentList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!-- <div class="colorCss">接受岗位</div>
          <div class="nocolorCss">
            <el-select
              clearable
              size="mini"
              v-model="claimDetail.guaranteeCase.receivePostId"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in PositionDownList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div> -->
          <div class="colorCss">接收人员</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="claimDetail.guaranteeCase.receiverId"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in postslists"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 第五行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">紧急程度</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="claimDetail.guaranteeCase.emergencyLevel"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in prilist"
                :key="index"
                :label="item.value"
                :value="item.type"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">订单类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="claimDetail.guaranteeCase.orderType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in businessList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">订单号</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              v-model="claimDetail.guaranteeCase.relevantOrderNumber"
              placeholder="订单号(必填)"
            ></el-input>
          </div>
          <div class="colorCss">状态</div>
          <div class="nocolorCss">
            <el-select
              clearable
              v-model="claimDetail.guaranteeCase.workOrderStatus"
              size="mini"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option label="处理完" value="1"></el-option>    
              <el-option label="待处理" value="0"></el-option>        
              <el-option label="废弃" value="2"></el-option>            
            </el-select>
          </div>
          <div class="nocolorCss">
            <!-- ·  <el-button size="mini">查询订单</el-button> -->
          </div>
        </div>
        <!-- 第六行 -->
        <div style="display: flex" class="rowcss">
          <div class="colorCss">指定完成时间</div>
          <div class="nocolorCss">
            <el-date-picker
              :value-format="format1"
              size="mini"
              v-model.trim="claimDetail.guaranteeCase.specifiedTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
          <div class="colorCss">期望完成时间</div>
          <div class="nocolorCss">
            <el-date-picker
              :value-format="format1"
              size="mini"
              v-model="claimDetail.expectFinishTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
          <div class="colorCss">期望回复时间</div>
          <div class="nocolorCss" style="width: 320px; display: flex">
            <el-input
              style="width: 100px"
              v-model="claimDetail.expectReplyTime"
              size="mini"
              placeholder="期望回复时间"
            ></el-input
            >分钟
          </div>
        </div>
        <!-- 第七行 -->
        <div style="display: flex; width: 100%" class="rowcss">
          <div style="width: 49%"></div>
        </div>
        <div class="btn">
          <el-button
            style="margin: 10px 0 0 45%"
            type="primary"
            @click="centerDialogVisibledet = false"
            >取消</el-button
          >
          <el-button
            v-if="title == '理赔工单编辑'"
            style="margin: 10px 0 0 45%"
            type="primary"
            @click="gettransferCount()"
            >转移</el-button
          >
          <el-button
            v-if="title == '理赔工单编辑'"
            @click="abandoned()"
            type="primary"
            style="margin: 10px 0 0 45%"
            size="mini"
            >废弃
          </el-button>
          <el-button
            v-if="title == '理赔工单编辑'"
            style="margin: 10px 0 0 45%"
            type="primary"
            @click="getclaimEdit()"
            >保存</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 工单转移 -->
    <el-dialog
      title="工单管理-工单转移"
      :visible.sync="transfer"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="add">
        <div class="header-1">
          <div class="header-1-1-1">
            <div class="tou"></div>
            <span>工单转移</span>
          </div>
        </div>
        <el-form
          style="margin-left: 20px"
          size="mini"
          :inline="true"
          :data="claimDetail"
          :model="claimDetail"
          class="pop"
        >
          <div class="pop-2">
            <div class="pop-1">
              <div class="invoice-1">
                <span class="invoice-9">接收人</span>
                <el-select
                  v-model="employeeId"
                  size="mini"
                  style="width: 120px"
                  clearable
                >
                  <el-option
                    v-for="item in postslists"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="pop-3">
            <el-button
              style="color: #fff; width: 66px"
              size="mini"
              type="primary"
              @click="WorkersChanBaoCun"
              >保存
            </el-button>
            <el-button
              @click="transfer = false"
              style="color: #fff; width: 66px"
              size="mini"
              type="primary"
              >取消
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "caseMalfeasance",
  data() {
    return {
      orderLedger: [],
      employeeId: "",
      transfer: false,
      // 机场列表
      auxiliary: [],
      guaranteeCase: {},
      title: "理赔工单详情",
      claimDetail: {
        guaranteeCase: {},
      },
      customerComplaintVo: {
        respondent: "32",
        complainWay: 0,
        complaintReason: 0,
        complaintDate: "123",
      },
      customerPhonees: "111",
      compensationAmount: "111",
      compensationVoList: {
        serviceCompensation: "111",
        compensationAmount: "111",
      },
      format: "yyyy-MM-dd",
      dialogImageUrl: "",
      dialogVisible: false,
      // 分页
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
      // // 查询
      Thequery: {
        caseId: "",
        caseStatus: "",
        afterTime: "",
        agoTime: "",
        orderId: "",
        orderType: "",
        customerId: "",
        phone: "",
      },
      // 时间
      CX: {
        date1: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000))
          .toLocaleDateString()
          .replace(/\//g, "-"), //   日期时间
        date2: new Date(new Date().getTime() +86400000).toLocaleDateString().replace(/\//g, "-"),
      },

      // 工单列表
      Therepairorder: [],
      // 工单类型
      mold: [
        {
          value: "hotel",
          label: "酒店",
        },
        {
          value: "flight",
          label: "机票",
        },
        {
          value: "service",
          label: "贵宾厅",
        },
        {
          value: "train",
          label: "火车票",
        },
        {
          value: "customer",
          label: "会员",
        },
      ],
      // 状态待处理 = 0,处理完 = 1,
      condition: [
        {
          value: 0,
          label: "待处理",
        },
        {
          value: 1,
          label: "处理完",
        },
        {
          value: 2,
          label: "废弃",
        },
      ],

      // 弹窗显示
      centerDialogVisible: false,
      centerDialogVisibledet: false,

      dialogImageUrl: "", //上传图片后的图片地址
      uploadImgBase64: "", //存储将图片转化为base64后的字符
      dialogVisible: false,

      // 表单验证规则
      rules: {
        delayDate: [
          {
            required: true,
            message: "请输入延误日期",
            trigger: "change",
          },
        ],
        flightNumber: [
          {
            required: true,
            message: "请输入航班号",
            trigger: "change",
          },
        ],
        originalSetOffTime: [
          {
            required: true,
            message: "请输入原定航班日期",
            trigger: "change",
          },
        ],
      },

      // 部门id
      deplt: "",
      // 时间格式
      format1: "yyyy-MM-dd HH:mm:ss",
      // 部门列表
      departmentList: [],
      // 部门数据
      receivingDepartment: "",
      // 工单小类列表
      workOrderTypeList: [],
      // 工单小类数据
      caseSubType: [
        {
          type: "delay",
          value: "航班延误",
        },
      ],
      // 员工下拉
      postslists: [],
      choosepostslists:[],
      // 航班状态
      flightStatusList: [
        {
          type: "delay",
          value: "航班延误",
        },
        {
          type: "cancel",
          value: "航班取消",
        },
      ],

      // 紧急成都
      prilist: [
        {
          type: "0",
          value: "普通",
        },
        {
          type: "1",
          value: "紧急",
        },
      ],
      // 紧急成都数据
      pri: "",
      // 订单类型
      businessList: [
        {
          value: "flight",
          label: "国内机票",
        },
        {
          value: "train",
          label: "火车票",
        },
        {
          value: "hotel",
          label: "酒店",
        },
        {
          value: "service",
          label: "贵宾厅",
        },
        {
          value: "VIPAisle",
          label: "vip通道",
        },
        {
          value: "checkIn",
          label: "值机",
        },
        {
          value: "customer",
          label: "会员",
        },
      ],
      caseTypeId: "",
      // 工单类型
      gongdanTypeList: [
        {
          lable: "claim",
          value: "理赔",
        },
      ],
      //工单类型数据
      caseType: "",
      caseClaimId: "",
      // 卡类型下拉菜单
      cardTypeList: [
        {
          value: "experience",
          label: "体验会员",
          id: 1,
        },
        {
          value: "silver",
          label: "白银会员",
          id: 2,
        },
        {
          value: "gold",
          label: "黄金会员",
          id: 3,
        },
        {
          value: "healthy",
          label: "黑金会员·健康卡",
          id: 4,
        },
        {
          value: "travel",
          label: "黑金会员·出行卡",
          id: 5,
        },
      ],
      headers: {
        type: "workOrder",
      },
      PositionDownList: [], //职位
      receivePost: "", //职位数据
      receiver: "", //接收人员
      founder: "", //创建人
      createCepartment: "", // 创建部门
      cardType: "", //卡类型
      cardNum: "", //会员卡号
      customerName: "", //会员姓名
      customerPhone: "", //会员手机号
      caseSubject: "", //工单标题
      orderType: "", //订单类型
      orderId: "", //订单号
      specifiedTime: "", //制定完成时间
      finish: "", //期望完成时间
      reply: "", //期望回复时间
      // 工单内容
      workOrderContentVo: {
        delayTime: "", //延误时长
        delayDate: "", //延误日期
        originalSetOffTime: "", //原定航班日期
        flightNumber: "", //航班号
        departureAirport: "", //出发机场
        arriveAirport: "", //到达机场
        journeySetOff: "", //行程（出发）
        journeyArrive: "", //行程（到达）
        originalDepartureTime: "", //原定起飞时间
        actualDepartureTime: "", //实际起飞时间
        originalLandingTime: "", //原定落地时间
        actualLandingTime: "", //实际降落时间
        delayContent: "", //延误补充
        documentVoList: [],
        claimCount: "", //已理赔次数
      },
      flightStatus: "", //航班状态
      certBefore: [],
      certAfter: [],
      flightProve: [],
      documentVoList: [],
      boardingPass: [],
    };
  },
  workOrderType: [
        {
          value: "ordinary",
          label: "普通",
        },
        {
          value: "derelictionDuty",
          label: "渎失职",
        },
        {
          value: "claim",
          label: "理赔",
        },
        {
          value: "complaint",
          label: "投诉",
        },
      ],
  watch: {
    // receivingDepartment(nV, oV) {
    //   this.deplt = nV;
    //   console.log(this.deplt);
    //   this.receivePost = "";
    //   this.getAll();
    // },
  },
  methods: {
    getcardlist() {
      this.$axios.getcardlist({}).then((res) => {
        if (res.code == 200) {
          this.cardTypeList = res.data;
          console.log(this.cardTypeList);
        }
      });
    },
    // 新增按钮
    centerDialogadd() {
      this.caseClaimId = "";
      this.workOrderContentVo.delayTime = "";
      this.workOrderContentVo.delayDate = "";
      this.workOrderContentVo.originalSetOffTime = "";
      this.workOrderContentVo.flightNumber = "";
      this.workOrderContentVo.departureAirport = "";
      this.workOrderContentVo.arriveAirport = "";
      this.workOrderContentVo.journeySetOff = "";
      this.workOrderContentVo.journeyArrive = "";
      this.workOrderContentVo.flightStatus = "";
      this.workOrderContentVo.originalDepartureTime = "";
      this.workOrderContentVo.actualDepartureTime = "";
      this.workOrderContentVo.delayContent = "";
      this.workOrderContentVo.actualLandingTime = "";
      // this.receivePost = "";
      this.receiver = "";
      this.founder = "";
      (this.createCepartment = ""), (this.cardType = "");
      this.cardNum = "";
      this.customerName = "";
      this.customerPhone = "";
      this.caseSubject = "";
      this.workOrderContentVo.claimCount = "";
      this.orderType = "";
      this.orderId = "";
      this.specifiedTime = "";
      this.finish = "";
      this.reply = "";
      this.centerDialogVisible = true;
    },
    // 图片上传成功
    successpickcherone(row) {
      let obj = {
        type: "certBefore",
        url: row[0],
      };
      this.workOrderContentVo.documentVoList.push(obj);
      console.log(this.workOrderContentVo.documentVoList);
    },
    successpickchertwo(row) {
      let obj = {
        type: "certAfter",
        url: row[0],
      };
      this.workOrderContentVo.documentVoList.push(obj);
      console.log(this.workOrderContentVo.documentVoList);
    },
    successpickcherthree(row) {
      let obj = {
        type: "boardingPass",
        url: row[0],
      };
      this.workOrderContentVo.documentVoList.push(obj);
      console.log(this.workOrderContentVo.documentVoList);
    },

    successpickcherfour(row) {
      let obj = {
        type: "flightProve",
        url: row[0],
      };
      this.workOrderContentVo.documentVoList.push(obj);
      console.log(this.workOrderContentVo.documentVoList);
    },

    // 编辑时图片的上传事件
    successpickcherfiv(row) {
      let obj = {
        type: "certBefore",
        url: row[0],
        claimPhotoPath: row[0],
        claimPhotoType: "certBefore",
      };
      this.certBefore.push(obj);
      console.log(this.certBefore);
    },
    successpickchersix(row) {
      let obj = {
        type: "certAfter",
        url: row[0],
        claimPhotoPath: row[0],
        claimPhotoType: "certAfter",
      };
      this.certAfter.push(obj);
      console.log(this.certAfter);
    },
    successpickchersev(row) {
      let obj = {
        type: "boardingPass",
        url: row[0],
        claimPhotoPath: row[0],
        claimPhotoType: "boardingPass",
      };
      this.boardingPass.push(obj);
      console.log(this.boardingPass);
    },
    successpickchereig(row) {
      let obj = {
        type: "flightProve",
        url: row[0],
        claimPhotoPath: row[0],
        claimPhotoType: "flightProve",
      };
      this.flightProve.push(obj);
      console.log(this.flightProve);
    },
    onRemove(file, fileList) {
      console.log(file, fileList);
      for (let i = 0; i < this.certBefore.length; i++) {
        if (this.certBefore[i].uid == file.uid) {
          this.certBefore.splice(i, 1);
        }
      }
      console.log(file, fileList);
    },
    onRemovea(file, fileList) {
      console.log(file, fileList);
      for (let i = 0; i < this.certAfter.length; i++) {
        if (this.certAfter[i].uid == file.uid) {
          this.certAfter.splice(i, 1);
        }
      }
    },
    onRemoves(file, fileList) {
      console.log(file, fileList);
      for (let i = 0; i < this.boardingPass.length; i++) {
        if (this.boardingPass[i].uid == file.uid) {
          this.boardingPass.splice(i, 1);
        }
      }
    },
    onRemoved(file, fileList) {
      console.log(file, fileList);
      for (let i = 0; i < this.flightProve.length; i++) {
        if (this.flightProve[i].uid == file.uid) {
          this.flightProve.splice(i, 1);
        }
      }
    },
    // 详情点击事件
    getclaimById(row, val) {
      console.log(row,val)
      val == "1"
        ? (this.title = "理赔工单编辑")
        : (this.title = "理赔工单详情");
      this.$axios
        .getclaimById({
          claimId: row.caseClaimId,
        })
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.claimDetail = JSON.parse(JSON.stringify(res.data));
            let arr1 = this.claimDetail.caseClaimPhotos.filter((item) => {
              return item.claimPhotoType == "certBefore";
            });
            console.log(arr1, this.certBefore);
            this.certBefore = arr1.map((item) => {
              let obj = {
                name: item.claimPhotoType,
                url: item.claimPhotoPath,
                claimPhotoPath: item.claimPhotoPath,
                claimPhotoType: item.claimPhotoType,
              };
              return obj;
            });

            let arr2 = this.claimDetail.caseClaimPhotos.filter((item) => {
              return item.claimPhotoType == "certAfter";
            });

            this.certAfter = arr2.map((item) => {
              let obj = {
                name: item.claimPhotoType,
                url: item.claimPhotoPath,
                claimPhotoPath: item.claimPhotoPath,
                claimPhotoType: item.claimPhotoType,
              };
              return obj;
            });

            let arr3 = this.claimDetail.caseClaimPhotos.filter((item) => {
              return item.claimPhotoType == "flightProve";
            });

            this.flightProve = arr3.map((item) => {
              let obj = {
                name: item.claimPhotoType,
                url: item.claimPhotoPath,
                claimPhotoPath: item.claimPhotoPath,
                claimPhotoType: item.claimPhotoType,
              };
              return obj;
            });

            let arr4 = this.claimDetail.caseClaimPhotos.filter((item) => {
              return item.claimPhotoType == "boardingPass";
            });
            this.boardingPass = arr4.map((item) => {
              let obj = {
                name: item.claimPhotoType,
                url: item.claimPhotoPath,
                claimPhotoPath: item.claimPhotoPath,
                claimPhotoType: item.claimPhotoType,
              };
              return obj;
            });
            this.centerDialogVisibledet = true;
            // this.certBefore[0].url = res.data.caseClaimPhotos[0].claimPhotoPath;
            // this.certAfter[0].url = res.data.caseClaimPhotos[1].claimPhotoPath;
            // this.documentVoList[0].url =
            //   res.data.caseClaimPhotos[2].claimPhotoPath;
            // this.flightProve[0].url =
            //   res.data.caseClaimPhotos[3].claimPhotoPath;
          }
        });
    },
    // 通过当前部门id查询员工
    selectMent() {
      this.postslist();
      this.getAll();
    },

    abandoned() {
      this.claimDetail.guaranteeCase.workOrderStatus = 2;
      this.getclaimEdit();
    },

    // 工单转移
    WorkersChanBaoCun() {
      let arr = {
        ids: [this.claimDetail.caseClaimId],
        employeeId: Number(this.employeeId),
      };
      if (this.employeeId != null) {
        localStorage.setItem("isToken", true);
        this.$axios.gettransferCount(arr).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.transfer = false;
            this.centerDialogVisibledet = false;
            this.seachBtn();
            this.$message({
              message: res.data[0].msg,
              type: "success",
            });
          } else {
            this.$message({
              message: "转移失败！！！！！",
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "请选择转移人员",
          type: "warning",
        });
      }
    },
    // 查询机场列表
    getairportList() {
      localStorage.removeItem("pageSize");
      localStorage.removeItem("pageNum");
      this.$axios
        .postairportList({
          airportName: "",
          airportCityName: this.workOrderContentVo.departureAirport,
          airportId: "",
          airportCityId: "",
          timeBack: "",
          time: "",
        })
        .then((res) => {
          localStorage.setItem("pageSize", 10);
          localStorage.setItem("pageNum", 1);
          console.log(res);
          if (res.code == "200") {
            this.auxiliary = res.data;
          }
        });
    },
    getairportLists() {
      localStorage.removeItem("pageSize");
      localStorage.removeItem("pageNum");
      this.$axios
        .postairportList({
          airportName: "",
          airportCityName: this.workOrderContentVo.arriveAirport,
          airportId: "",
          airportCityId: "",
          timeBack: "",
          time: "",
        })
        .then((res) => {
          localStorage.setItem("pageSize", 10);
          localStorage.setItem("pageNum", 1);
          console.log(res);
          if (res.code == "200") {
            this.auxiliary = res.data;
          }
        });
    },
    choosePost(id){
      console.log(id)
      this.chooseposts(id)
    },
    gettransferCount() {
      this.transfer = true;
      console.log(this.claimDetail);
    },
    // 理赔工单编辑接口
    getclaimEdit() {
      let documentVoList = [];
      console.log(this.certBefore);
      if (this.certBefore.length > 0) {
        this.certBefore.forEach((item) => {
          documentVoList.push(item);
        });
      }
      if (this.certAfter.length > 0) {
        this.certAfter.forEach((item) => {
          documentVoList.push(item);
        });
      }
      if (this.boardingPass.length > 0) {
        this.boardingPass.forEach((item) => {
          documentVoList.push(item);
        });
      }
      if (this.flightProve.length > 0) {
        this.flightProve.forEach((item) => {
          documentVoList.push(item);
        });
      }
      console.log(this.claimDetail.guaranteeCase);
      let arr = this.claimDetail;
      this.$axios
        .getclaimEdit({
          // claimId: arr.claimId,
          reallandingtime: arr.reallandingtime,
          latedate: arr.latedate,
          departureTime: arr.departureTime,
          flightno: arr.flightno,
          departurecode: arr.departurecode,
          arrivalcode: arr.arrivalcode,
          departure: arr.departure,
          arrival: arr.arrival,
          flightstatus: arr.flightstatus,
          realFlyawayDate: arr.realFlyawayDate,
          scheduledlandingtime: arr.scheduledlandingtime,
          delayContent: arr.delayContent,
          expectFinishTime: arr.expectFinishTime,
          expectReplyTime: arr.expectReplyTime,
          caseClaimId: arr.caseClaimId,
          caseClaimPhotos: documentVoList,
          guaranteeCase: {
            caseId: arr.caseId,
            workOrderStatus: arr.guaranteeCase.workOrderStatus,
            // receiveDepartment: arr.guaranteeCase.receiveDepartment,
            receiveDepartmentId: arr.guaranteeCase.receiveDepartmentId,
            receivePostId: arr.guaranteeCase.receivePostId,
            // receiver: arr.guaranteeCase.receiver,
            receiverId: arr.guaranteeCase.receiverId,
            emergencyLevel: arr.guaranteeCase.emergencyLevel,
            orderType: arr.guaranteeCase.orderType,
            relevantOrderNumber: arr.guaranteeCase.relevantOrderNumber,
            specifiedTime: arr.guaranteeCase.specifiedTime,
          },
        })
        .then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.centerDialogVisibledet = false;
            this.seachBtn();
          } else {
            // this.$message.error(res.msg);
          }
        });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.dialogVisible = true;
    },
    seachBtn(){
            localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getbackGuaranteeCaseById()
    },
    // 查询工单
    getbackGuaranteeCaseById() {
      this.$axios
        .getbackGuaranteeCaseById({
          caseId: this.Thequery.caseId,
          caseStatus: this.Thequery.caseStatus,
          afterTime: this.CX.date1 ? this.CX.date1 : "",
          agoTime: this.CX.date2 ? this.CX.date2 : "",
          orderId: this.Thequery.orderId,
          orderType: this.Thequery.orderType,
          customerId: this.Thequery.customerId,
          phone: this.Thequery.phone,
          type: "claim",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            // 工单列表数据
            this.Therepairorder = res.data;
            this.pageTotal = res.total;
          }
        });
    },

    // 创建
    getbackGuaranteeCase() {
      localStorage.setItem("isToken", true);
      console.log(
        this.receiver,
        this.receivingDepartment,
        this.workOrderContentVo
      );
      let claimVo = {
        template: "",
        finish: this.finish, //期望完成时间
        reply: this.reply, //期望回复时间
        workOrderContentVo: this.workOrderContentVo,
      };
      if (this.workOrderContentVo.originalDepartureTime == "") {
        this.$message({
          type: "warning",
          message: "原定起飞时间不能为空",
        });
      } else if (this.workOrderContentVo.actualDepartureTime == "") {
        this.$message({
          type: "warning",
          message: "实际起飞时间不能为空",
        });
      } else if (this.workOrderContentVo.originalLandingTime == "") {
        this.$message({
          type: "warning",
          message: "原定降落时间不能为空",
        });
      } else if (this.workOrderContentVo.actualLandingTime == "") {
        this.$message({
          type: "warning",
          message: "实际降落时间不能为空",
        });
      } else if (this.workOrderContentVo.delayTime == "") {
        this.$message({
          type: "warning",
          message: "延误时长不能为空",
        });
      } else if (this.workOrderContentVo.delayDate == "") {
        this.$message({
          type: "warning",
          message: "延误日期不能为空",
        });
      } else if (this.workOrderContentVo.originalSetOffTime == "") {
        this.$message({
          type: "warning",
          message: "原定航班日期不能为空",
        });
      } else if (this.orderId == "") {
        this.$message({
          type: "warning",
          message: "订单号不能为空",
        });
      } else if (this.type == "") {
        this.$message({
          type: "warning",
          message: "传入类型不能为空",
        });
      } else if (this.cardType == "") {
        this.$message({
          type: "warning",
          message: "卡类型不能为空",
        });
      } else if (this.caseTypeId == "") {
        this.$message({
          type: "warning",
          message: "工单分类不能为空",
        });
      } else if (this.caseSubject == "") {
        this.$message({
          type: "warning",
          message: "工单标题不能为空",
        });
      } else if (this.caseType == "") {
        this.$message({
          type: "warning",
          message: "工单类型不能为空",
        });
      } else if (this.caseSubType == "") {
        this.$message({
          type: "warning",
          message: "工单小类不能为空",
        });
      } else if (this.caseContent == "") {
        this.$message({
          type: "warning",
          message: "工单内容不能为空",
        });
      } else if (this.receivingDepartment == "") {
        this.$message({
          type: "warning",
          message: "接收部门不能为空",
        });
      } 
    
      else if (this.receiver == "") {
        this.$message({
          type: "warning",
          message: "接收人不能为空",
        });
      } else if (this.pri == "") {
        this.$message({
          type: "warning",
          message: "紧急程度不能为空",
        });
      } else if (this.orderType == "") {
        this.$message({
          type: "warning",
          message: "订单类型不能为空",
        });
      } else if (this.orderId == "") {
        this.$message({
          type: "warning",
          message: "订单号不能为空",
        });
      } else {
        console.log(this.cardType);
        this.$axios
          .getbackGuaranteeCase({
            cardType: this.cardType, //卡类型
            caseSubject: this.caseSubject, //标题
            caseTypeId: this.caseTypeId, // 工单分类
            caseSubType: this.caseSubType, //工单小类
            caseContent: this.caseContent,
            cardNum: this.cardNum, //会员卡号
            customerName: this.customerName, //会员姓名
            customerPhone: this.customerPhone, //会员手机号
            claimCount: this.claimCount, //已赔偿次数
            receivingDepartment: this.receivingDepartment, //部门
            // receivePost: this.receivePost, //职位
            receiver: this.receiver, //人员
            founder: this.founder, //人员
            createCepartment: this.createCepartment, //人员
            pri: this.pri, //紧急成都
            orderType: this.orderType, //订单类型
            orderId: this.orderId, //订单号
            specifiedTime: this.specifiedTime, //制定完成时间
            workOrderType: "claim", //类型
            claimVo: claimVo,
            flightStatus: this.flightStatus,
            // customerComplaintVo: this.customerComplaintVo,
            compensationAmount: "10",
            // compensationVoList: this.compensationVoList,
            type: "Crm",

            // serviceCompensation: "",
          })
          .then((res) => {
            
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.$axios
                .getbackGuaranteeCaseById({
                  caseId: "",
                  caseStatus: "",
                  afterTime: "",
                  agoTime: "",
                  orderId: "",
                  orderType: "",
                  customerId: "",
                  phone: "",
                  type: "claim",
                })
                .then((res) => {
                  console.log(res);
                  if (res.code == "200") {
                    // 工单列表数据
                    this.Therepairorder = res.data;
                    this.pageTotal = res.total;
                  }
                });
              this.centerDialogVisible = false;
            }
          });
      }
    },

    // 工单分类列表
    getlists() {
      this.$axios.getlists({}).then((res) => {
        if (res.code == "200") {
          console.log(res);
          this.orderLedger = res.data;
        }
      });
    },

    // } else {
    //   this.$message.error("请输入正确的工单信息");
    // }
    // 查会员信息
    getcustomerId() {
      if (
        this.customerName != "" ||
        this.cardNum != "" ||
        this.customerPhone != ""
      ) {
        this.$axios
          .getcustomerId({
            customerName: this.customerName,
            customerCard: this.cardNum,
            customerPhone: this.customerPhone,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.customerName = res.data.customerName;
              this.cardNum = res.data.customerCard;
              this.customerPhone = res.data.customerPhone;
              this.cardType = Number(res.data.level);
            } else {
              this.$message({
                showClose: true,
                message: "查询错误",
                type: "error",
              });
            }
          });
      } else {
        this.$message({
          showClose: true,
          message: "会员姓名，手机号，卡号任选其一必填",
          type: "error",
        });
      }
    },

    // 接收部门
    geteedepartmentlist() {
      this.$axios.geteedepartmentlist({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          let list = JSON.parse(JSON.stringify(res.data));
          this.departmentList = list.map((item) => {
            console.log("我是接收部分---", item);
            // 将item.deptId
            return {
              label: item.deptName,
              value: item.deptId,
            };
          });
          console.log(this.departmentList);
        }
      });
    },
    // 工单小类
    getselectworkOrderType() {
      // debugger
      this.$axios
        .getselectworkOrderType({
          caseTypeId: "1",
        })
        .then((res) => {
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            let list1 = [];
            list1 = list.filter((item) => {
              return item;
            });
            this.workOrderTypeList = list1.map((item) => {
              if (item == null) {
              } else {
                return {
                  label: item.workOrderType,
                  value: String(item.caseSubTypeId),
                };
              }
            });
            console.log(this.workOrderTypeList);
          }
        });
    },

    // 职位下拉列表
    getAll() {
      this.$axios
        .getAll({
          deptId:
            this.title == "理赔工单编辑"
              ? this.claimDetail.guaranteeCase.receiveDepartment
              : this.receivingDepartment,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.PositionDownList = list.map((item) => {
              return {
                label: item.positionName,
                value: item.positionId,
              };
            });
          }
        });
    },

    // 员工下拉choosepostslists
    postslist() {
      this.$axios
        .postslist({
          deptId:
            this.title == "理赔工单编辑"
              ? this.claimDetail.guaranteeCase.receiveDepartment
              : this.receivingDepartment,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.postslists = list.map((item) => {
              return {
                label: item.employeeName,
                value: item.employeeId,
              };
            });
            console.log(this.postslists);
          }
        });
    },
     // 员工下拉
    chooseposts(id) {
      this.$axios
        .postslist({
          deptId:id
           
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.choosepostslists = list.map((item) => {
              return {
                label: item.employeeName,
                value: item.employeeId,
              };
            });
            console.log(this.choosepostslists);
          }
        });
    },
    closediali() {
      // this.caseClaimId = ""
    },
    //上传头像
    getuploadAvatar(file) {
      // debugger;
      console.log(file);
      this.$axios

        .getuploadAvatar({
          file: file,
        })
        .then((res) => {
          console.log(res.data);
          if (res.code == "200") {
          }
        });
    },
    //分页
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.getbackGuaranteeCaseById();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      console.log("222", value);
      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.getbackGuaranteeCaseById();
      // orders = res.data;
    },

   
      // 城市
     getselectCityList(){
      this.$axios.getselectCityList({

      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
           let list = JSON.parse(JSON.stringify(res.data));
          this.querySearch = list.map((item) => {
            return { label: item.cityName, value: item.cityName };
          });
          console.log(this.querySearch);
        }
      })
    },
  },
  mounted() {
    this.seachBtn()

    console.log(this.$route.query)
    if(this.$route.query.row) {
      this.getclaimById(this.$route.query.row,this.$route.query.val)
    }
    // console.log(this.receivePost);
    // 部门
    this.geteedepartmentlist();
    // 工单小类
    this.getselectworkOrderType();
    this.getAll();
    this.postslist();
    this.getcardlist();
    this.getairportList();
    this.getlists();
    this.getselectCityList()
  },
};
</script>

<style scoped>
.body {
  margin: 10px;
  border: 0.5px solid #4490ae;
  width: 1100px;
  font-weight: 400;
  font-size: 13px;
}

.colorCss {
  background-color: #e8f3f7;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-right: 0.5px solid #4490ae;
}

.nocolorCss {
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-right: 0.5px solid #4490ae;
  display: flex;
}

.rowcss {
  border-bottom: 0.5px solid #4490ae;
}

.rowheight {
  /* height: 400px; */
  width: 80px;
  line-height: 350px;
  border-right: 0.5px solid #4490ae;
  background-color: #e8f3f7;
}

/* 上传照片 */
.upload-img-div {
  width: 50px;
  height: 50px;
  position: relative;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  text-align: center;
}

.addFeedbackUpload-img {
  overflow: hidden;
  width: 50px;
  height: 50px;
}

.addFeedbackUpload-img:hover {
  border-color: #c80505;
  color: #c80505;
}

.addFeedbackUpload-img .avatar-uploader-icon {
  text-align: center;
  z-index: 100;
  font-size: 50px;
  color: #8c939d;
  width: 130px;
  line-height: 80px;
  height: 100px;
}

.addFeedbackUpload-img:hover .avatar-uploader-icon {
  color: #c80505;
}

.addFeedbackUpload-img .upload__tip {
  font-size: 12px;
  text-align: center;
  z-index: 10;
}

/*上传照片的删除*/
.delUploadImg {
  border-radius: 50%;
  position: absolute;
  top: -10px;
  font-size: 20px;
  right: -10px;
  z-index: 999;
  color: #8c939d;
}

.delUploadImg:hover {
  color: #c80505;
}

.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}

.header-1-1 {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  padding-top: 20px;
}

.header-1-1-1 {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  /* padding-top: 20px; */
}

.invoice {
  width: 97%;
  margin: auto;
  display: flex;
  height: 44px;
  margin-bottom: 20px;
  min-width: 1200px;
}

.invoice-1 {
  margin-right: 20px;
}

.invoice-2 {
  margin-left: 20px;
}

.tuo-1 {
  display: flex;
}

.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}

.tuo {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  padding-top: 20px;
  justify-content: space-between;
  margin-right: 20px;
}

.table {
  width: 99%;
}
.btn {
  display: flex;
  width: 81px;
  text-align: center;
  margin: 0 auto;
}
.pop-3 {
  margin-left: 20px;
  margin-top: 40px;
}
</style>>